import React, {Component, Fragment} from 'react'
import './App.css';

class  TodoList extends Component{
    constructor(props){
        super(props);
        this.state={
            inputValue:props.name,
            list:[]
        }
    }
    render(){
        return (
            <Fragment>
                <div>
                    <input value={this.state.inputValue} onChange={this.handleInputChange.bind(this)}/>
                    <button onClick={this.handleBtnClick.bind(this)}>提交</button>
                </div>
                <ul>
                    {
                        this.state.list.map((value,index) => {
                            return <li onClick={this.handleDelItem.bind(this,index)} key={index}>{value}</li>
                        })
                    }
                </ul>
            </Fragment>
        )
    }
    handleInputChange(e){
        this.setState(
            {
                inputValue:e.target.value
            }
        )
    }
    handleBtnClick(){
        this.setState(
            {
                list:[...this.state.list,this.state.inputValue],
                inputValue:''
            }
        )
    }
    handleDelItem(index){
        const list = [...this.state.list];
        list.splice(index,1);
        this.setState({
            list: list
        })
    }
}
export default TodoList;